// document ready function
$(document).ready(function() { 	
	var divElement = $('div');
	var chartColours = ['#88bbc8', '#ed7a53', '#9FC569', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];
	randNum = function(){
		//return Math.floor(Math.random()*101);
		return (Math.floor( Math.random()* (1+40-20) ) ) + 20;
	}
	
	if (divElement.hasClass('order-bars-chart')) {
		$(function () {
			//some data
			var d1 = [];
		    for (var i = 0; i <= 30; i += 1)
		        d1.push([i, parseInt(Math.random() * 30)]);
		 
		    var d2 = [];
		    for (var i = 0; i <= 30; i += 1)
		        d2.push([i, parseInt(Math.random() * 30)]);
		 
		    
		 
		    var ds = new Array();
		 
		     ds.push({
		     	label: "用户数",
		        data:d1,
		        bars: {order: 1}
		    });
		    ds.push({
		    	label: "数据量",
		        data:d2,
		        bars: {order: 2}
		    });

		    var options = {
					bars: {
						show:true,
						barWidth: 0.1,
						fill:0.7
					},
					grid: {
						show: true,
					    aboveData: false,
					    color: "#3f3f3f" ,
					    labelMargin: 5,
					    axisMargin: 0, 
					    borderWidth: 0,
					    borderColor:null,
					    minBorderMargin: 5 ,
					    clickable: true, 
					    hoverable: true,
					    autoHighlight: false,
					    mouseActiveRadius: 20
					},
			        series: {
			        	grow: {active:false}
			        },
			        legend: { position: "ne" },
			        //yaxis: { min: 0 },
			        //xaxis: {ticks:11, tickDecimals: 0},
			        colors: chartColours,
			        tooltip: true, //activate tooltip
					tooltipOpts: {
						content: "%s : %y.0",
						shifts: {
							x: -30,
							y: -50
						}
					}
			};

			$.plot($(".order-bars-chart"), ds, options);
		});
		}//end if
	
	if (divElement.hasClass('top5-bars-chart')) {
		$(function () {
			//some data
			var d1 = [];
		    for (var i = 0; i < 5; i += 1)
		        d1.push([i, parseInt(Math.random() * 3000)]);

		    var ds = new Array();
		 
		     ds.push({
		     	label: "数据量",
		        data:d1,
		        bars: {order: 1}
		    });

		    var options = {
					bars: {
						show:true,
						barWidth: 0.3,
						fill:1
					},
					grid: {
						show: true,
					    aboveData: false,
					    color: "#3f3f3f" ,
					    labelMargin: 5,
					    axisMargin: 0, 
					    borderWidth: 0,
					    borderColor:null,
					    minBorderMargin: 5 ,
					    clickable: true, 
					    hoverable: true,
					    autoHighlight: false,
					    mouseActiveRadius: 20
					},
			        series: {
			        	grow: {active:false}
			        },
			        legend: { position: "ne" },
			        yaxis: { min: 0 },
			        xaxis: {min: 0,ticks:11, tickDecimals: 0},
			        colors: chartColours,
			        tooltip: true, //activate tooltip
					tooltipOpts: {
						content: "%s : %y.0",
						shifts: {
							x: -30,
							y: -50
						}
					}
			};

			$.plot($(".top5-bars-chart"), ds, options);
		});
	}//end if
	
	/*原始数据分类占比*/
	if (divElement.hasClass('simple-pie')) {
		$(function () {
			var data = [
			    { label: "电商",  data: 38, color: "#88bbc8"},
			    { label: "微博",  data: 23, color: "#ed7a53"},
			    { label: "SNS",  data: 15, color: "#9FC569"},
			    { label: "教育",  data: 9, color: "#bbdce3"},
			    { label: "其它",  data: 7, color: "#9a3b1b"}
			];

		    $.plot($(".simple-pie"), data, 
			{
				series: {
					pie: { 
						show: true,
						highlight: {
							opacity: 0.1
						},
						radius: 1,
						stroke: {
							color: '#fff',
							width: 2
						},
						startAngle: 2,
					    combine: {
		                    color: '#353535',
		                    threshold: 0.05
		                },
		                label: {
		                    show: true,
		                    radius: 1,
		                    formatter: function(label, series){
		                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent)+'%</div>';
		                    }
		                }
					},
					grow: {	active: false}
				},
				legend:{show:false},
				grid: {
		            hoverable: true,
		            clickable: true
		        },
		        tooltip: true, //activate tooltip
				tooltipOpts: {
					content: "%s : %y.1"+"%",
					shifts: {
						x: -30,
						y: -50
					}
				}
			});
		});
	}//end if
	
	//网络流量图
	if (divElement.hasClass('network-chart')) {
		$(function () {

			//some data
			var d1 = [[1, 3+randNum()], [2, 6+randNum()], [3, 9+randNum()], [4, 12+randNum()],[5, 15+randNum()],[6, 18+randNum()],[7, 21+randNum()],[8, 15+randNum()],[9, 18+randNum()],[10, 21+randNum()],[11, 24+randNum()],[12, 27+randNum()],[13, 30+randNum()],[14, 33+randNum()],[15, 24+randNum()],[16, 27+randNum()],[17, 30+randNum()],[18, 33+randNum()],[19, 36+randNum()],[20, 39+randNum()],[21, 42+randNum()],[22, 45+randNum()],[23, 36+randNum()],[24, 39+randNum()],[25, 42+randNum()],[26, 45+randNum()],[27,38+randNum()],[28, 51+randNum()],[29, 55+randNum()], [30, 60+randNum()]];
			var d2 = [[1, randNum()-5], [2, randNum()-4], [3, randNum()-4], [4, randNum()],[5, 4+randNum()],[6, 4+randNum()],[7, 5+randNum()],[8, 5+randNum()],[9, 6+randNum()],[10, 6+randNum()],[11, 6+randNum()],[12, 2+randNum()],[13, 3+randNum()],[14, 4+randNum()],[15, 4+randNum()],[16, 4+randNum()],[17, 5+randNum()],[18, 5+randNum()],[19, 2+randNum()],[20, 2+randNum()],[21, 3+randNum()],[22, 3+randNum()],[23, 3+randNum()],[24, 2+randNum()],[25, 4+randNum()],[26, 4+randNum()],[27,5+randNum()],[28, 2+randNum()],[29, 2+randNum()], [30, 3+randNum()]];
			//define placeholder class
			var placeholder = $(".network-chart");
			//graph options
			var options = {
					grid: {
						show: true,
					    aboveData: true,
					    color: "#3f3f3f" ,
					    labelMargin: 5,
					    axisMargin: 0, 
					    borderWidth: 0,
					    borderColor:null,
					    minBorderMargin: 5 ,
					    clickable: true, 
					    hoverable: true,
					    autoHighlight: true,
					    mouseActiveRadius: 20
					},
			        series: {
			        	grow: {active:false},
			            lines: {
		            		show: true,
		            		fill: true,
		            		lineWidth: 2,
		            		steps: false
			            	},
			            points: {show:false}
			        },
			        legend: { position: "se" },
			        yaxis: { min: 0 },
			        xaxis: {ticks:11, tickDecimals: 0},
			        colors: chartColours,
			        shadowSize:1,
			        tooltip: true, //activate tooltip
					tooltipOpts: {
						content: "%s : %y.0",
						shifts: {
							x: -30,
							y: -50
						}
					}
			    };   
		
	        	$.plot(placeholder, [ 

	        		{
	        			label: "Down Stream", 
	        			data: d1,
	        			lines: {fillColor: "#f2f7f9"},
	        			points: {fillColor: "#88bbc8"}
	        		}, 
	        		{	
	        			label: "Up Stream", 
	        			data: d2,
	        			lines: {fillColor: "#fff8f2"},
	        			points: {fillColor: "#ed7a53"}
	        		} 

	        	], options);

		});
	}//end if
	
	//当月突出节点
	if (divElement.hasClass('month-bar-chart')) {
		$(function () {
			//some data
			var d1 = [];
		    for (var i = 1; i <= 5; i += 1)
		        d1.push([i, parseInt(Math.random() * 30)]);
		 
		    var d2 = [];
		    for (var i = 1; i <= 5; i += 1)
		        d2.push([i, parseInt(Math.random() * 30)]);
		 
		    
		 
		    var ds = new Array();
		 
		     ds.push({
		     	label: "系列一",
		        data:d1,
		        bars: {order: 1}
		    });
		    ds.push({
		    	label: "系列二",
		        data:d2,
		        bars: {order: 2}
		    });

		    var options = {
					bars: {
						show:true,
						barWidth: 0.1,
						fill:0.7
					},
					grid: {
						show: true,
					    aboveData: false,
					    color: "#3f3f3f" ,
					    labelMargin: 5,
					    axisMargin: 0, 
					    borderWidth: 0,
					    borderColor:null,
					    minBorderMargin: 5 ,
					    clickable: true, 
					    hoverable: true,
					    autoHighlight: false,
					    mouseActiveRadius: 20
					},
			        series: {
			        	grow: {active:false}
			        },
			        xaxes: { },
			        legend: { position: "ne" },
			        colors: chartColours,
			        tooltip: true, //activate tooltip
					tooltipOpts: {
						content: "%s : %y.0",
						shifts: {
							x: -30,
							y: -50
						}
					}
			};

			$.plot($(".month-bar-chart"), ds, options);
		});
	}//end if
	
});